<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/chatpage.css" rel="stylesheet" />		
	</head>

	<body contextmenu="return false;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"  onclick="location='chatbox.html'"></a>
			<h1 class="mui-title">聊天窗口</h1>
		</header>
		<pre id='h'></pre>
		<div class="mui-content">
			<div id='msg-list'>
				<div class="sender">
					<div>
					<img src="../img/ex.jpg"> 
					</div>
  				<div>
      				<div class="left_triangle"></div>
      				<span> hello, man! </span>
   				</div>					
				</div>
			</div>
		</div>
		<footer>
			<div class="footer-left">
				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
			</div>
			<div class="footer-center">
				<textarea id='msg-text' type="text" class='input-text'></textarea>
				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
			</div>
			<label for="" class="footer-right">
				<a id='msg-type' class="mui-icon mui-icon-chatboxes" onclick="senrec()"></a>
			</label>
		</footer>
		<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div>
		<script>
			function senrec(){
				var stext=document.getElementById('msg-text').value;
				var msgl=document.getElementById('msg-list');
				
				var a = document.createElement("div");
				a.setAttribute("class","receiver");
				
				var b = document.createElement('div');
				var c = document.createElement('img');
				c.setAttribute("src","../img/profile.jpg");
				
				var d = document.createElement('div');
				var e = document.createElement('div');
				e.setAttribute("class","right_triangle");
				var f = document.createElement('span');
				f.innerHTML = stext;
				
				b.append(c);
				d.append(e);
				d.append(f);
				a.append(b);
				a.append(d);
				
				msgl.append(a);
				stext=" ";
			}
		</script>
		</script>
	</body>

</html>